<!DOCTYPE html>
<!-- Declares the root element that allows behavior to be modified through Angular custom HTML tags. -->
<html ng-app="persons">
    <head>
        <title></title>
        <script src="lib/angular-1.3.0beta5.min.js"></script>
        <script src="lib/jquery-2.1.0.js"></script>
        <script src="lib/ui-bootstrap-tpls-0.10.0.min.js"></script>
        <script src="lib/ng-grid-2.0.7.min.js"></script>

        <script src="scripts/daoUsers.js"></script>

        <link rel="stylesheet" type="text/css" href="css/bootstrap-3.1.1.css"/>
        <link rel="stylesheet" type="text/css" href="css/ng-grid-2.0.7.css"/>
        <link rel="stylesheet" type="text/css" href="css/myStyle.css"/>
    </head>

    <body>

        <br/>

        <div class="grid">
            <!-- Specify a JavaScript controller script that binds Javascript variables to the HTML.-->
            <div ng-controller="usersList">
                <!-- Binds the grid component to be displayed. -->
                <div class="gridStyle" ng-grid="gridOptions"></div>

                <!--  Bind the pagination component to be displayed. -->
                <pagination direction-links="true" boundary-links="true"
                            total-items="users.totalResults" page="persons.currentPage" items-per-page="persons.pageSize"
                            on-select-page="refreshGrid(page)">
                </pagination>
            </div>
        </div>

    </body>
</html>